import React, { useEffect } from 'react';
import { Button, DatePicker, Space } from 'antd';
import { TjSelect, useTRState } from '@/pages/ETrade/components';
import moment from 'moment/moment';
import { UploadOutlined } from '#/utils/antdIcons';
import { getDataList } from '@/pages/GanSuDaTang/Report/Week/severs';

const { RangePicker } = DatePicker;

const YARD_TYPE = [
  {
    id: 0,
    label: '全部交易场站类型',
    value: 0,
  },
  {
    id: 1,
    label: '风电',
    value: 1,
  },
  {
    id: 2,
    label: '光伏',
    value: 2,
  },
];

const defaultForm = (stations) => {
  // 默认表单
  return {
    yardType: YARD_TYPE[0]['value'],
    date: [moment().weekday(-3), moment().weekday(+3)],
    stationIdList: stations.map(({ value }) => value),
  };
};
export const HeaderSearch = ({ stations = [], setFatherState = Function }) => {
  const [state, setState] = useTRState({
    ...defaultForm(stations),
  });

  useEffect(() => {
    moment.updateLocale('zh-cn', {
      week: { dow: 5, doy: 4 },
    });
    fetchData().then();
  }, []);

  const changeDate = (v) => {
    setState({ date: v });
  };

  const onFinish = async () => {
    await fetchData();
  };

  const onReset = () => {
    setState({
      ...defaultForm(stations),
    });
  };

  const onExport = () => {};

  const fetchData = async () => {
    setFatherState({
      loading: true,
    });
    const res = await getDataList({
      startDate: state.date[0].format('YYYY-MM-DD'),
      endDate: state.date[1].format('YYYY-MM-DD'),
      stationIdList: state.stationIdList,
    });
    setFatherState({
      loading: false,
      dataSource: res.data || [],
    });
  };

  return (
    <>
      <Space size={16} wrap>
        <TjSelect
          style={{ width: 200 }}
          value={state.stationIdList}
          options={stations}
          showSearch
          onChange={(stationIdList) => setState({ stationIdList })}
          mode="multiple"
          label="交易单元"
        />
        <RangePicker
          // disabled={[false, true]}
          style={{ width: 300 }}
          value={state.date}
          format={'YYYYMMDD'}
          allowClear={false}
          onChange={changeDate}
        />
        <Space size={16}>
          <Button style={{ width: 98, height: 32 }} type="primary" onClick={onFinish}>
            查询
          </Button>
          <Button style={{ width: 98, height: 32 }} ghost onClick={onReset}>
            重置
          </Button>
        </Space>
      </Space>
      <Space>
        <Button type="link" icon={<UploadOutlined />} onClick={onExport}>
          导出
        </Button>
      </Space>
    </>
  );
};
